<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/assets/aui/css/aui.css"/>
    <!-- jQuery Include -->
    <script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctxPath}/static/assets/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/assets/layui/layui.js" charset="utf-8"></script>
    <meta charset="UTF-8">
    <title>评论页面</title>
    <style>
        #comment>li>div>div>img{
            border-radius: 50%;
            height: 3rem;
            width: 3rem;
        }
        #comment>li>div>div>div>div{
           font-size: 12px;
        }
        #comment>li>div{
            height: 4rem ;
        }
        #comment>li>div>.aui-list-item-inner{
            line-height: 2;
        }
    </style>
</head>
<body>
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list" id="head-info">
        <li>
            <header class="aui-bar aui-bar-nav">
                <a class="aui-pull-left aui-btn" onclick='retn()'>
                    <span class="aui-iconfont aui-icon-back"></span>返回
                </a>
                <div class="aui-title">评论列表</div>
            </header>
        </li>
    </ul>
</div>

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list" id="comment">

    </ul>
</div>
</body>
<script type="text/javascript" src="${ctxPath}/static/assets/aui/script/aui-lazyload.js" ></script>
<script type="text/javascript">
    new auiLazyload({
        errorImage:'${ctxPath}/static/assets/images/loading.gif'
    });
</script>
<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "${ctxPath}/artificerMeans/findAllComment/${artificerId}",
            dataType: 'json',
            success: function (result) {
                if (result.status == "0000") {
                    var comments=result.data;
                    var  str="";
                    if(comments.length>0){
                        var  array=new Array();
                        for(var i=0;i<comments.length;i++){
                            console.log(comments[i]);
                            str+=" <li class=\"aui-list-item\">\n" +
                                "                <div class=\"aui-media-list-item-inner\">\n" +
                                "                    <div class=\"aui-list-item-media\" style=\"width:6rem\">\n" +
                                "                        <img src='http://www.tyler.org.cn/"+comments[i].consumerPict+"' data-src='http://www.tyler.org.cn/"+comments[i].consumerPict+"'>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"aui-list-item-inner\">\n" +
                                "                        <div class=\"aui-list-item-text\">\n" +
                                "                            <div class=\"aui-list-item-title\">"+comments[i].contant+"</div>\n" +
                                "                        </div>\n" +
                                "                        <div class=\"aui-list-item-text\">\n" +
                                "                            <div class=\"aui-list-item-title\"><div class='grade"+i+"'></div>"+comments[i].createTime+"</div>\n" +
                                "                        </div>\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </li>";
                            //评分
                            var grade=comments[i].grade;
                            var  clazz='.grade'+i;
                            var jsonObj={};
                            jsonObj.clazz=clazz;
                            jsonObj.grade=grade;
                            array.push(jsonObj);
                        }
                        //填充星星
                        layui.use(['rate'], function(){
                            var rate = layui.rate;
                            for(var  i=0;i<array.length; i++){
                                var  clazz= array[i].clazz;
                                rate.render({
                                    elem: clazz
                                    ,length: 5
                                    , half: true           //支持半颗星
                                    ,readonly: true
                                    ,value: array[i].grade
                                });
                                $(".layui-icon").css("font-size","12px");
                            }
                        });

                        $("#comment").html(str)
                    }else{
                        str+="<li>\n" +
                            "            <header class=\"aui-bar aui-bar-nav\">\n" +
                            "                <a class=\"aui-pull-left aui-btn\" onclick='retn()'>\n" +
                            "                    <span class=\"aui-iconfont aui-icon-back\"></span>返回\n" +
                            "                </a>\n" +
                            "                <div class=\"aui-title\">评论列表</div>\n" +
                            "            </header>\n" +
                            "        </li>";
                        str+="<li class='aui-list-item aui-list-item-middle'><div style='line-height:1.4rem;text-align: center;font-style: normal;font-size: 14px;width: 100%;height: 1.5rem;color: gray;margin-top: 15px;'>暂无评论!</div></li>";
                        $("#head-info").html(str)
                    }
                }
            }
        });
    })
    function retn() {
        location.href="${ctxPath}/artificerMeans/createOrderPage?artId=${artificerId}";
    }
</script>
</html>